@import './../app/variablesV2.css';

:root {
  --word-choice-height: 36px;
  --checkmark-size: 24px;
}

@keyframes optionsAppear {
  from { transform: scale(0); }
  to { transform: scale(1); }
}

@keyframes optionsDisappear {
  from { transform: scale(1); }
  to { transform: scale(0); }
}

@for $i from 1 to 3 {
  .confirmHolder .options span:nth-child($i) {
    animation-delay: calc(var(--animation-delay-standard) * $i);
  }
}

.confirmHolder {
  align-items: flex-start;
  display: flex;
  font-size: var(--subtitle-font-size);
  min-height: 210px;
  margin: 70px 0;
  justify-content: space-evenly;
  position: relative;
  width: 100%;

  & .word {
    color: var(--color-content);
    font-family: var(--heading-font);
    font-size: inherit;
    font-weight: var(--font-weight-bold);
    letter-spacing: 0.1px;
    line-height: var(--word-choice-height);
    text-align: center;
  }

  & .optionsHolder {
    display: flex;
    flex-direction: column;
    margin: -8px 0;

    & .answer {
      height: var(--word-choice-height);
      margin: 8px 0;
      min-width: 90px;
      position: relative;

      &::before {
        border: 1px dashed var(--color-content);
        border-radius: 5px;
        box-sizing: border-box;
        content: '';
        height: 100%;
        left: 0;
        position: absolute;
        top: 0;
        width: 100%;
      }
    }

    & .checkmark {
      align-items: center;
      background-color: var(--color-white);
      border-radius: 50%;
      box-shadow: var(--box-shadow-standard);
      display: flex;
      height: var(--checkmark-size);
      justify-content: center;
      position: absolute;
      right: calc(var(--checkmark-size) / -2);
      top: calc(var(--checkmark-size) / -2);
      transition: transform var(--animation-speed-fast) linear;
      transform: scale(0);
      width: var(--checkmark-size);

      & > span {
        font-size: var(--paragraph-font-size-s);
      }
    }

    & .choice {
      align-items: center;
      background-color: var(--color-white);
      border-radius: var(--border-radius-standard);
      box-shadow: var(--box-shadow-standard);
      box-sizing: border-box;
      color: var(--color-content);
      cursor: pointer;
      display: flex;
      height: 100%;
      justify-content: center;
      padding: 0 10px;
      position: relative;
      transition: transform var(--animation-speed-fast) linear, opacity var(--animation-speed-fast) linear, color var(--animation-speed-fast) linear;
      transform: scale(0);
      width: 100%;
    }
  }

  & .answered {
    & .choice {
      opacity: 1;
      transform: scale(1);
    }

    & .options .option {
      animation-name: optionsDisappear;
      animation-delay: var(--animation-delay-standard);
      animation-duration: var(--animation-speed-standard);
      animation-fill-mode: forwards;
      animation-iteration-count: 1;
      transform: scale(1);

      &.selected {
        animation-delay: 0ms;
      }
    }
  }

  & .hasErrors {
    & .choice {
      background-color: var(--color-error);
      box-shadow: var(--box-shadow-standard);
      color: var(--color-white);
      cursor: initial;
      transition: background var(--animation-speed-fast) linear var(--animation-delay-standard), box-shadow var(--animation-speed-fast) linear var(--animation-delay-standard);
    }
  }

  & .isCorrect {
    & .choice {
      cursor: initial;
    }

    & .checkmark {
      transform: scale(1);
    }
  }

  & .options {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }

  & .option {
    animation-name: optionsAppear;
    animation-duration: var(--animation-speed-standard);
    animation-fill-mode: forwards;
    animation-iteration-count: 1;
    display: flex;
    height: var(--word-choice-height);
    margin: 8px 0;
    transform: scale(0);

    & > button {
      font-family: var(--heading-font);
      font-size: inherit;
      min-height: var(--word-choice-height);
      height: var(--word-choice-height);
      width: 100%;
    }
  }

  & .errorMessage {
    background-color: var(--color-white);
    border-radius: var(--border-radius-standard);
    box-shadow: var(--box-shadow-standard);
    max-width: 50%;
    padding: 20px;
    position: absolute;
    transition: transform var(--animation-speed-standard) ease-in;
    transform: scale(0);
    top: 20%;

    &.showError {
      transform: scale(1);
    }

    & > span {
      color: var(--color-error);
      font-family: var(--content-font);
      font-size: var(--paragraph-font-size-l);
      line-height: 1.47;
    }
  }
}

@media (--medium-viewport) {
  .confirmHolder {
    font-size: var(--subtitle-font-size-s);
  }
}

@media (--small-viewport) {
  .confirmHolder {
    font-size: var(--paragraph-font-size-s);
  }
}
